<template>
  <div class="chat_box_3">
    <dv-border-box-7 :color="['#2EC8ED', '#2EC8ED']">
      <dv-loading v-if="loading" />
      <template v-else>
        <title-box title="客户新增" />
        <div class="chat_box_content flex">
          <div id="chat5" class="flex-1 chat_box_item" />
        </div>
      </template>
    </dv-border-box-7>
  </div>
</template>

<script>
import * as echarts from "echarts";
import TitleBox from "./title_box.vue";
export default {
  components: { TitleBox },

  data() {
    return {
      loading: false,
      timeData: [],
      seriesData: [],
    };
  },

  mounted() {
    this.fetchData();
  },

  methods: {
    async fetchData() {
      // try {
      //   this.loading = true;

      //   const { data } = await reqChartData3();
      //   this.seriesData = data.data;
      //   this.timeData = data.time;
      //   this.loading = false;

      //   this.$nextTick(() => {
      //     this.initChart1();
      //   });
      // } catch (error) {
      //   this.loading = false;
      // }

      this.$nextTick(() => {
        this.initChart1();
      });
    },

    initChart1() {
      var myChart = echarts.init(document.getElementById("chat5"));
      const options = {
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{b}<br/> {c}人",
          confine: true,
          backgroundColor: "rgba(255,255,255,0.7)",
        },
        legend: {
          top: "5%",
          right: "5%",
          itemWidth: 15,
          itemHeight: 7,
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
        },
        grid: {
          top: "25%",
          left: "10%",
          bottom: "20%",
          right: "10%",
        },

        xAxis: {
          type: "category",
          // data: this.timeData,
          data: ["2024上", "2024下", "2025上", "2025下", "2026上", "2026下"],
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "#304775",
            },
          },
          axisLabel: {
            color: "#2EC8ED",
            padding: [5, 0, 0, 0],
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "#23365D",
              dashOffset: 5,
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 1,
              color: "#fff",
            },
          },
          axisLabel: {
            color: "#2EC8ED",
          },
        },
        // series: this.seriesData,
        series: [
          {
            name: "博士",
            data: [820, 932, 901, 934, 1290, 1330],
            type: "line",
          },
          {
            name: "硕士",
            data: [222, 333, 444, 555, 666, 777],
            type: "line",
          },
          {
            name: "其他",
            data: [123, 234, 422, 234, 112, 423],
            type: "line",
          },
          {
            name: "迁出",
            data: [44, 66, 34, 45, 112, 234],
            type: "line",
          },
        ],
      };

      myChart.setOption(options);
    },
  },
};
</script>

<style lang="scss" scoped>
.chat_box_3 {
  z-index: 99;
  position: absolute;
  box-sizing: border-box;
  padding: 10px;

  left: 2vw;
  top: 61vh;
  width: 28%;
  height: 28vh;

  .chat_box_content {
    width: 100%;
    display: flex;
    height: calc(28vh - 7vh);
    .chat_box_item {
      height: 100%;
    }
  }
}
</style>
